import React, {useState, useRef} from 'react';
import {View, Button, StyleSheet, PanResponder} from 'react-native';

const DraggableButton = () => {
  const [position, setPosition] = useState({x: 0, y: 0});
  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onPanResponderMove: (evt, gestureState) => {
        setPosition({
          x: position.x + gestureState.dx,
          y: position.y + gestureState.dy,
        });
      },
      onPanResponderEnd: (evt, gestureState) => {
        // 可以在这里添加释放按钮后的逻辑
      },
    }),
  ).current;

  return (
    <View
      {...panResponder.panHandlers}
      style={[
        styles.buttonContainer,
        {transform: [{translateX: position.x}, {translateY: position.y}]},
      ]}>
      <Button title="Drag Me" color="blue" />
    </View>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    width: 100,
    height: 50,
    backgroundColor: 'lightgrey',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default DraggableButton;
